<template>
    <div class="zhuye">
        <div class="beijing">
            <div class="kuang">
                <div>
                    <div style="border-bottom: 1px #333 solid; justify-content: center;height: 60%;">
                        <h2
                            style="text-align: center; font-size: 24px;  color: aqua;; margin-top: 20px; margin-bottom: 20px;">
                            课程管理系统</h2>
                    </div>


                </div>
                <div style="width: 100%;height: 10%;"></div>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" type="text" v-model="ruleForm.username"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="password" v-model="ruleForm.password"
                            autocomplete="off"></el-input>
                    </el-form-item>
                    <template>
                        <el-radio-group v-model="ruleForm.userType">
                            <el-radio :label="2">教师</el-radio>

                            <el-radio :label="3">教务管理员</el-radio>
                        </el-radio-group>
                    </template>

                    <el-form-item>
                        <el-button style="width: 100%;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { userLogin } from '@/api/index'
export default {
    data() {

        return {

            tu: {

            },
            ruleForm: {
                username: '',
                password: '',
                userType: 3,

            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        };
    },
    methods: {
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    userLogin(this.ruleForm).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            console.log(1);
                            console.dir(this.$message);

                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            })

                            if (res.data.userType == 3) {
                                this.$router.push({
                                    path: "/neirong"
                                })
                            } else {
                                this.$router.push({
                                    path: "/shouye"
                                })
                            }
                        }

                    })

                }
            });
        },

    }
}
</script>

<style lang="scss">
.an1 {
    height: 50px;
    width: 200px;
    background-color: aqua;
    font-size: 28px;
}

.beijing {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    /* 使容器高度占满整个视口高度，用于垂直居中 */
    background-image: url('/src/assets/beijing.png');

    background-size: contain;
    /* 使背景图片按比例缩放以适应容器 */

    background-position: center;
    /* 将背景图片居中 */

    background-repeat: no-repeat;
    /* 防止背景图片重复 */

}

.kuang {
    /* .kuang 本身不需要设置 justify-content 和 align-self，因为它现在是 .beijing 的直接子元素，并且 .beijing 已经负责对齐 */

    /* 可选：为 .kuang 添加背景色以更好地看到其边界 */
    padding: 20px;
    /* 可选：为 .kuang 添加内边距 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* 可选：为 .kuang 添加阴影以增强立体感 */
    width: 20%;
    height: 20%;
    align-items: center;
}
</style>